<template>
  <page-header-wrapper>
    <template v-slot:content>
      <a-upload
        name="file"
        :action="`${BASE_URL}/community/tool/save_file`"
        :headers="{
          authorization: token
        }"
        @change="handleChange"
        style="margin-bottom: 10px"
      >
        <a-button> <a-icon type="upload" /> 添加资源文件 </a-button>
      </a-upload>
      <div style="margin-top: 10px">
        <a-table
          :columns="columns"
          :data-source="data"
          bordered
          :rowKey="record=>record.resources_id"
          :pagination="pagination"
        >
          <template
            v-for="col in ['resources_id', 'resources_path']"
            :slot="col"
            slot-scope="text, record"
          >
            <div :key="col">
              {{ col === 'resources_path' ? `${BASE_URL}/community/tool/get_file/${record.resources_id}` :text }}
            </div>
          </template>
          <template
            slot="file"
            slot-scope="text, record"
          >
            <img :src="`${BASE_URL}/community/tool/get_file/${record.resources_id}`" :alt="record.resources_id" style="width: 110px; height: 120px" />
          </template>
          <template slot="operation" slot-scope="text, record">
            <a target="_balnk" style="float: left; margin-right: 10px;" :href="`${BASE_URL}/community/tool/get_file/${record.resources_id}`">预览/下载</a>
            <div class="editable-row-operations">
              <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => del(record)">
                <a>删除</a>
              </a-popconfirm>
            </div>
          </template>
        </a-table>
      </div>
    </template>
  </page-header-wrapper>
</template>

<script>
import {
  getFiles,
  delFile
} from '@/api/tool'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
const columns = [
  {
    title: 'resources_id',
    dataIndex: 'resources_id',
    width: '25%',
    scopedSlots: { customRender: 'resources_id' }
  },
  {
    title: 'resources_path',
    dataIndex: 'resources_path',
    width: '25%',
    scopedSlots: { customRender: 'resources_path' }
  },
  {
    title: 'file',
    dataIndex: 'file',
    width: '25%',
    scopedSlots: { customRender: 'file' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '25%',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  data () {
    return {
      data: [],
      BASE_URL: process.env.VUE_APP_API_BASE_URL,
      columns,
      editingKey: '',
      form: {
        page: 1
      },
      pagination: {
        total: 0,
        onChange: (page) => {
          this.form.page = page
          this.searchResources()
        }
      }
    }
  },
  components: {
    PageHeaderWrapper
  },
  mounted () {
    this.searchResources()
  },
  computed: {
    token () {
      return this.$store.getters.token
    }
  },
  methods: {
    searchResources () {
      getFiles(this.form).then(res => {
        this.data = res.items
        this.pagination.total = res.count ? res.count : 0
      })
    },
    del (record) {
      delFile(record).then(res => {
        this.searchResources()
      })
    },
    handleChange (info) {
      if (info.file.status === 'done') {
        for (const index in info.file.response.items) {
          this.data.unshift(info.file.response.items[index])
        }
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    }
  }
}
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px
}
</style>
